<html>
<head>
    <title>jQuery Place Demo</title>
    <style>
body, input, select, button { font-size: 12px; }
#intro pre {
    font-size: 8pt;
    margin: 3px;
}
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
#main {
    height: 220px;
}
label {
    margin-left: 12px;
    margin-top: 2px;
}
#control {
    margin-top: 4px;
    padding: 4px;
}
#control, #options {
    width: 300px;
    background: #eee;
}
.select {
    color: #666;
    font-style: italic;
    float: right;
    font-size: 10pt;
}
#red {
    width: 90;
    height: 70;
    background: red;
    padding: 15px;
}
#yellow {
    width: 200;
    height: 200;
    background: yellow;
    margin: 4px;
    position: absolute;
    left: 350px;
}
.secondary, .secondary input, .secondary select {
    color: #999;
}
    </style>
<!-- this css is optional; it just makes things prettier. -->
    <link href="../place/jquery.place.css" rel="stylesheet">
    <script type="text/javascript" src="../../jquery.1.4.2.js"></script>
    <script type="text/javascript" src="../measure/jquery.measure.js"></script>
    <script type="text/javascript" src="jquery.place.js"></script>
    <script type="text/javascript" src="../pulse/jquery.pulse.js"></script>
    <script type="text/javascript" src="../../trunk/jquery.values.js"></script>
    <script type="text/javascript" src="../log/log.js"></script>
    <script type="text/javascript">
$(function() {
    // extend behavior when we see a place event
    $(document).bind('place', function(e, o) {
        if (o.element == '#main') {
            o.show = false;// setting this cancels the place action
            alert('Blocked use of #main as element to demonstrate intercepting and cancelling a place action. (see source)');
        }
        // remove on click
        o.self.click(function() {
            var b = o.box;
            $(this).trigger('unplace', [o]);
            console.log('Removed item at:'+ o.at, o.offset ? ' offset:'+o.offset : '',
                        ' top:', b.top,' left:',b.left,' height:',b.height,' width:',b.width, o);
        });
    });
    // fancier disappearing act
    $.fn.place.remove = function(o) {
        this.fadeOut('fast', function(){ o.self.remove(); });
    };

    // this just runs the demo interface
    $('.run').live('click', function() {
        var opts = $.values();
        // treat empty strings as undefined
        for (var k in opts) if (opts[k] == '') delete opts[k];
        // give alt fields priority
        if (opts.atAlt) opts.at = opts.atAlt;
        if (opts.offsetAlt) opts.offset = opts.offsetAlt;
        if (opts.select) {
            $(opts.select).place(opts);
        } else {
            $.place(opts);
        }
    });
});
    </script>
</head>
<body>
<div id="main" class="box">
    <span class="select">#main.box</span>
    <div id="yellow" class="fill">
        <span class="select">#yellow.fill</span>
        <div id="red" class="fill">
            <span class="select">#red.fill</span>
        </div>
    </div>
    <div id="control">
    $('<select name="select" title="The empty option calls $.place() instead.">
        <option></option>
        <option>#red</option>
        <option>#yellow</option>
        <option>#intro</option>
        <option>.box</option>
        <option>.fill</option>
        <option>span:first</option>
        <option>button</option>
    </select>').place({
    <div id="options" title="All of these options are optional, and these are just a small subset of those available.">
        <label for="select">text:</label>
        '<input type="text" name="text" value="Click to hide" size="11">',<br>
        <label for="img">img: 'smile.gif'</label>
        <input type="checkbox" name="img" value="smile.gif">,<br>
        <label for="element">element:</label>
        <select name="element">
            <option></option>
            <option>#red</option>
            <option>#yellow</option>
            <option>#intro span</option>
            <option>#main</option>
            <option>span:first</option>
            <option>:checkbox</option>
            <option>button</option>
        </select>,<br>
        <div class="secondary"
             title="This is completely ignored if you have any text, img or element option specified.">
        <label for="into">into:</label>
        <select name="into">
            <option></option>
            <option>#red</option>
            <option>#yellow</option>
            <option>#intro</option>
            <option>#main</option>
            <option>span:first</option>
            <option>.box</option>
            <option>.fill</option>
        </select>,<br>
        </div>
        <label for="at">at:</label>
        '<select name="at">
            <option></option>
            <option>above</option>
            <option>0%</option>
            <option>top</option>
            <option>42</option>
            <option>100</option>
            <option>33%</option>
            <option>center</option>
            <option>66%</option>
            <option>bottom</option>
            <option>100%</option>
            <option>below</option>
            <option>200%</option>
        </select>&nbsp;<select name="at">
            <option></option>
            <option>before</option>
            <option>0%</option>
            <option>left</option>
            <option>42</option>
            <option>33%</option>
            <option>center</option>
            <option>66%</option>
            <option>right</option>
            <option>100%</option>
            <option>after</option>
            <option>200%</option>
        </select>' or '<input type="text" name="atAlt" size="12">',<br>
        <label for="offset">offset:</label>
        '<select name="offset">
            <option></option>
            <option>-100%</option>
            <option>-42</option>
            <option>-50%</option>
            <option>-5</option>
            <option>0%</option>
            <option>5</option>
            <option>50%</option>
            <option>42</option>
            <option>100%</option>
            <option>150%</option>
        </select>&nbsp;<select name="offset">
            <option></option>
            <option>-100%</option>
            <option>-42</option>
            <option>-50%</option>
            <option>-5</option>
            <option>0%</option>
            <option>5</option>
            <option>50%</option>
            <option>42</option>
            <option>100%</option>
            <option>150%</option>
        </select>' or '<input type="text" name="offsetAlt" size="8">',<br>
        <label for="time">time:</label>
        <select name="time">
            <option></option>
            <option>5000</option>
            <option>10000</option>
            <option>30000</option>
            <option>60000</option>
        </select>,<br>
        <div class="secondary"
            title="This option is only supported when the $.pulse plugin is present.  See $.pulse docs for more info and options.">
            <label for="effect">effect:</label>
            <select name="effect">
                <option></option>
                <option>fade</option>
            </select>
        </div>
   </div>
    });
    <button class="run">Run</button>
    </div>
</div>
<br clear="all">
<div id="intro" class="box">
    <span class="select">#intro.box</span>
For the sake of the demo, placed items can be removed by clicking on them.<br>
All settings are optional.  Though it would be best to have some text, img or element value. :)
<pre>text: new text content
img: URL for new image content
element: any new content (i.e. html, selector, dom element, jquery selection, etc)
into: if you have no text, img or element specified, the selection this was called upon is moved to the specified location
      if this parameter is absent, it is simply moved within its parent element.
at: vertical and horizontal positions (space separated string or array pair, single values applied to both)
    all possible word values are shown in the demo.
    percentages put center of the placed item at that % of the parent's total length in that dimension.
    specific numbers are directly used as the top and left settings for the placed item.
offset: vert and horz offset values (space separated string or array pair, single values apply to both)
        specific numbers are directly added to placed item's top and left.
        percentages adjust top and left by percent of the placed items total length in that dimension.
time: sets a time (ms) for the placed item to automatically remove itself</pre>
Be sure to view the source code. :)
</div>
</body>
</html>